﻿/// <reference path="../Libriries/jquery-2.0.3.js" />
/// <reference path="../Libriries/q.js" />
/// <reference path="class.js" />

var TopicTree = (function () {
    var ARTICLES_FILES_PATH = "../Views/Articles/BG/";

    var TREE_STYLE = {
        'list-style-type': 'none',
        'margin-top': '2px'
    };

    var TOPIC_FRAME_STYLE = {
        'margin': '2px',
        'display': 'none'
    };

    var TOPIC_HEADER_STYLE = {
        'background-color': 'rgba(255, 255, 255, 0.15)',
        'padding': '3px',
        'font-size': '26px',
        'font-family': 'Calibri',
        'cursor': 'hand',
        'cursor': 'pointer'
    };

    var TOPIC_HEADER_ANCHOR_STYLE = {
        'text-decoration': 'none',
        'color': 'rgba(255,255,255,0.8)',
        'padding': '5px',
        'margin-top': '10px',
    };

    var TOPIC_HEADER_MouseEnter = { 'background-color': 'rgba(255, 255, 255, 0.25)' };
    var TOPIC_HEADER_MouseLeave = { 'background-color': 'rgba(255, 255, 255, 0.15)' };

    var SUBTOPIC_FRAME_STYLE = {
        'color': 'rgba(255,255,255,0.8)',
        'padding-left': '10px',
        'display': 'none'
    };

    var SUBTOPIC_ANCHOR_STYLE = {
        'font-size': '22px',
        'font-family': 'Calibri',
        'background-color': 'rgba(255,255,255,0.1)',
        'margin': '2px',
        'margin-left': '20px',
        'padding-left': '5px',
        'cursor': 'hand',
        'cursor': 'pointer',
        'text-decoration': 'none',
        'display': 'block',
        'color': 'inherit'
    };

    var SUBTOPIC_MouseEnter = { 'background-color': 'rgba(255, 255, 255, 0.15)' };
    var SUBTOPIC_MouseLeave = { 'background-color': 'rgba(255, 255, 255, 0.08)' };

    var TreeClass = Class.create({
        init: function (treeHolderSelector, headerSelector, articleHolderSelector) {
            this.topics = [];

            this.treeHolder = $(treeHolderSelector);
            this.articleHeader = $(headerSelector);
            this.articleHolder = $(articleHolderSelector);

            this.tree = $("<ul id='topicTree'></ul>");
            this.tree.css(TREE_STYLE);

            this.selectedTopic;
        },
        addTopic: function (topicName, article) {
            var self = this;
            var topic = new Topic(topicName, article);

            $(topic.frame).click(function (event) {
                var sender = event.target || event.srcElement;

                if (sender.className == "topic") {
                    if (self.selectedTopic != topic) {
                        var header = self.articleHeader;
                        var h1 = $(header).children("h1");
                        h1.text(topic.name);

                        header.css({ 'display': 'none' });
                        header.toggle('slide');

                        self.loadArticle(topic.article);
                    }

                    self.selectedTopic.hideSubtopics();
                    topic.showSubtopics();
                    self.selectedTopic = topic;
                }
            });

            this.topics.push(topic);

            return topic; //to be able to catch it and add subtopics
        },
        render: function () {
            console.log("time");
            this.treeHolder.html(null);
            this.tree.html(null);
            var renderIndex = 0;
            this.treeHolder.append(this.tree);
            this.selectedTopic = this.topics[0];

            this.asyncRender(renderIndex);
        },
        asyncRender: function (renderIndex) {
            //recursively add all topic controls and then fadeIn them. 
            //the async comes from the async nature of the animation.
            var self = this;
            var topicsArr = this.topics;

            this.tree.append(topicsArr[renderIndex].render());

            topicsArr[renderIndex].frame.fadeIn(220, function () {
                renderIndex += 1;
                if (renderIndex < topicsArr.length) {
                    //call recursively to add next topic, as renderedIndex is still less than the 
                    //length of the collection of topics
                    self.asyncRender(renderIndex);
                }
                else {
                    //if all topics have been added it calles the animation 
                    //of the article header and content
                    $(self.articleHeader).html("<h1>" + self.selectedTopic.name + "</h1>");

                    if (!$(self.articleHeader).is(":visible")) {
                        $(self.articleHeader).toggle('slide');
                    }
                    topicsArr[0].showSubtopics();

                    self.loadArticle(self.topics[0].article);
                }
            });
        },
        loadArticle: function (article) {
            var self = this;
            self.articleHolder.load(ARTICLES_FILES_PATH + article, function () {
                $(self.articleHolder.children()[0]).fadeIn(1000);
            });
        }
    });

    var Topic = Class.create({
        init: function (name, article) {
            var self = this;
            this.name = name;
            this.article = article;

            this.frame = $("<li></li>");
            this.frame.css(TOPIC_FRAME_STYLE);

            this.topicHeader = $("<div class='topic'></div>");
            this.topicHeader.css(TOPIC_HEADER_STYLE);

            this.topicHeader.hover(
                function () {
                    $(this).css(TOPIC_HEADER_MouseEnter);
                },
                function () {
                    $(this).css(TOPIC_HEADER_MouseLeave);
                }
            );

            this.topicHeaderAnchor = $("<a class='topic' href='#'></a>");
            this.topicHeaderAnchor.text(name); //adds the text escaped
            this.topicHeaderAnchor.css(TOPIC_HEADER_ANCHOR_STYLE);

            this.topicHeader.append(this.topicHeaderAnchor);
            this.frame.append(this.topicHeader);

            this.subtopics = $("<ul></ul>");
            this.subtopics.css(SUBTOPIC_FRAME_STYLE);
            this.frame.append(this.subtopics);
        },
        render: function () {
            return this.frame;
        },
        addSubtopic: function (text, id) {
            var subtopic = $("<a href='" + id + "'><li></li></a>");

            subtopic.css(SUBTOPIC_ANCHOR_STYLE);

            subtopic.hover(
                function () {
                    $(this).css(SUBTOPIC_MouseEnter);
                },
                function () {
                    $(this).css(SUBTOPIC_MouseLeave);
                }
            );

            subtopic.text(text);

            this.subtopics.append(subtopic);
        },
        showSubtopics: function() {
            $(this.subtopics).slideDown();
        },
        hideSubtopics: function (sender) {
            $(this.subtopics).slideUp();
        }
    });


    var changeArticlesLanguage = function (language) {
        ARTICLES_FILES_PATH = "../Views/Articles/" + language + "/";
    }

    return {
        TreeClass: TreeClass,
        changeArticlesLanguage: changeArticlesLanguage,
        changeTreeStyle: function(treeStyleObject) {
            TREE_STYLE = treeStyleObject;
        },
        changeTopicFrameStyle: function(topicFrameStyleObject) {
            TOPIC_FRAME_STYLE = topicFrameStyleObject;
        },
        changeTopicHeaderStyle: function(topicHeaderStyleObject) {
            TOPIC_HEADER_STYLE = topicHeaderStyleObject;
        },
        changeTopicHeaderAnchorStyle: function (topicHeaderAnchorStyleObject) {
            TOPIC_HEADER_ANCHOR_STYLE = topicHeaderAnchorStyleObject;
        },
        changeTopicHeaderMouseEnter: function (topicHeaderMouseEnterStyleObject) {
            TOPIC_HEADER_MouseEnter = topicHeaderMouseEnterStyleObject;
        },
        changeTopicHeaderMouseLeave: function (topicHeaderMouseLeaveStyleObject) {
            TOPIC_HEADER_MouseLeave = topicHeaderMouseLeaveStyleObject;
        },
        changeSubtopicFrameStyle: function(subtopicFrameStyleObject) {
            SUBTOPIC_FRAME_STYLE = subtopicFrameStyleObject;
        },
        changeSubtopicAnchorStyle: function (subtopicAnchorStyleObject) {
            SUBTOPIC_ANCHOR_STYLE = subtopicAnchorStyleObject;
        },
        changeSubtopicMouseEnter: function (subtopicMouseEnterStyleObject) {
            SUBTOPIC_MouseEnter = subtopicMouseEnterStyleObject;
        },
        changeSubtopicMouseLeave: function (subtopicMouseLeaveStyleObject) {
            SUBTOPIC_MouseLeave = subtopicMouseLeaveStyleObject;
        }
    }
}());